<template>
  <el-container class="main-container">

    <!-- 头部 -->
    <el-header class="header el-row">

      <el-col :span="12" class="app-name">
        {{ appName }}
      </el-col>

      <el-col :span="4"
              :offset="8"
              class="header-common">
        <el-avatar icon="el-icon-user-solid" :size="30"></el-avatar>&nbsp;&nbsp;
        <el-dropdown>
            <span class="el-dropdown-link">
              {{ userName }}
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

    </el-header>

    <!-- 内容 -->
    <el-container class="center-container">

      <!-- 菜单 -->
      <el-aside class="menu-container">

        <el-menu :default-active="activeMenuIndex">

          <!-- 一级菜单 -->
          <el-submenu v-for="(rootItem, rootIndex) in menus"
                      v-if="rootItem.meta.isMenu"
                      :index="rootIndex.toString()"
                      :key="rootItem.path">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ rootItem.meta.title }} </span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item-group>
              <el-menu-item v-for="(leafItem,leafIndex) in rootItem.children"
                            :index="leafItem.name"
                            :key="leafItem.path"
                            @click="menuChanged(leafItem,leafIndex)">
                {{ leafItem.meta.title }}
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>

      </el-aside>

      <!-- 页面 -->
      <el-main class="content-container">
        <el-tabs type="card"
                 class="tabs"
                 v-model="activeTabName"
                 @tab-click="tabClicked"
                 @tab-remove="removeTab">
          <el-tab-pane v-for="(item,index) in tabs"
                       :label="item.title"
                       :key="item.name"
                       :name="item.name.toString()"
                       :closable="item.closable">
          </el-tab-pane>
        </el-tabs>

        <div class="page-container-main">
          <div class="page-container">
            <keep-alive>
              <router-view/>
            </keep-alive>
          </div>
        </div>

      </el-main>

    </el-container>

    <!-- 底部 -->
    <el-footer class="footer">


    </el-footer>

  </el-container>

</template>

<script>


export default {
  name: 'Index',
  components: {},
  data() {
    return {
      // 应用名称
      appName: this.$globalData.appName,
      // 菜单集
      menus: [],
      // Tab 页集
      tabs: [],
      // 当前 Tab名称
      activeTabName: "",
      // 当前 Tab下标
      activeTabIndex: -1,
      // 当前 菜单下标
      activeMenuIndex: "",
      // 用户名称
      userName: "管理员"

    };
  },
  computed: {},
  watch: {},
  created() {

    // 加载 菜单
    this.loadMenu();

    // 加载 默认菜单
    this.loadDefaultMenu();

  },
  methods: {
    /**
     * 加载菜单
     * */
    loadMenu: function () {

      // 指定菜单
      this.menus = this.$router.options.routes;

    },
    /**
     * 加载默认菜单
     * */
    loadDefaultMenu: function () {

      let homeRoute = this.menus[1].children[0];

      // 添加 Tab
      this.addTab(homeRoute, 0, false);
    },
    /**
     * 菜单导航
     * */
    menuChanged: function (route, routeIndex) {

      // 查找 Tab
      let findTab = this.tabs.find(i => i.name == route.name)

      if (findTab) {

        // 获取 下标
        let findeIndex = this.tabs.indexOf(findTab);

        // 切换 Tab
        this.tabChanged(route.name, findeIndex);

      } else {

        // 添加 Tab
        this.addTab(route, routeIndex);

      }

      // 导航
      this.navigateTo(route.name);

    },
    /**
     * 添加Tab
     * */
    addTab: function (route, routeIndex, closable = true) {

      // 验证是否存在
      let exist = this.tabs.every(i => i.name != route.name);
      if (exist)
        this.tabs.push({name: route.name, title: route.meta.title, route, closable});

      // 切换Tab
      this.tabChanged(route.name, this.tabs.length - 1);

    },
    /**
     * 移除Tab
     * */
    removeTab: function (tabName) {

      // 查找 Tab
      let findTab = this.tabs.find(i => i.name == tabName)

      // 获取 下标
      let findeIndex = this.tabs.indexOf(findTab);

      // 切换
      if (findeIndex <= this.activeTabIndex) {

        // 设置 切换Tab 下标
        let changeTabIndex = this.activeTabIndex - 1;

        // 设置 切换Tab 名称
        let changeTabName = this.activeTabName == tabName ? this.tabs[changeTabIndex].name : this.activeTabName

        // 切换 Tab
        this.tabChanged(changeTabName, changeTabIndex);

      }

      // 移除 Tab
      this.tabs.splice(findeIndex, 1);
    },
    /**
     * Tab 点击
     * */
    tabClicked: function (tab, event) {

      // 切换 Tab
      this.tabChanged(tab.name, tab.index);

    },
    /**
     * Tab 变更
     * */
    tabChanged: function (tabName, tabIndex) {

      // 设置 当前 Menu Index
      this.activeMenuIndex = tabName;

      // 设置 当前 Tab标签Name
      this.activeTabName = tabName;

      // 设置 当前 Tab标签Index
      this.activeTabIndex = tabIndex;

      // 导航
      this.navigateTo(tabName);
    },
    /**
     * 导航
     * */
    navigateTo: function (routerName) {
      this.$router[`push${routerName}`]();
    }
  },
};
</script>

<style scoped lang="less">
@import "index.less";
</style>

